<template>
  <KView class="shop-mall-tab">
    <KFlex class="shop-mall-tab-top">
      <KFlexItem v-for="tabMenu in menus" :key="tabMenu.id">
        <KView @click="tabChange(tabMenu)">
          <KView class="shop-mall-tab-title" :class="{'select':tabMenu.id===value}">
            <span>{{tabMenu.label}}</span>
            <KView v-if="tabMenu.id===value" class="shop-mall-tab-line"></KView>
          </KView>
        </KView>
      </KFlexItem>
    </KFlex>
    <KView class="shop-mall-tab-content">
      <slot></slot>
    </KView>
  </KView>
</template>

<script>
  export default {
    props: {
      value: {
        type: String,
        required: true
      },
      menus: {
        type: Array,
        required: true
      }
    },

    data() {
      return {};
    },

    methods: {
      tabChange(tabMenu) {
        let id = tabMenu.id;
        if (this.value === id) {
          return;
        }

        this.$emit('input', id);
        this.$emit('change', id);
      }
    }
  };

</script>

<style lang="scss">
  .shop-mall-tab {
    height: 100%;

    .shop-mall-tab-top {
      border-bottom: 1px solid #E5E5E5;

      .shop-mall-tab-title {
        width: formatPx(80);
        vertical-align: top;
        text-align: center;
        font-size: formatPx(34);
        color: #b6b8bc;
        padding-bottom: formatPx(18);
        margin: auto;
        position: relative;

        &.select {
          color: #59c264;
        }

        .shop-mall-tab-line {
          position: absolute;
          background: #59c264;
          width: 100%;
          height: formatPx(7);
          left: 0;
          bottom: formatPx(-4);
          border-radius: formatPx(4);
        }
      }
    }
    .shop-mall-tab-content{
      height: calc(100% - #{formatPx(72)} - 1px);
    }
  }

</style>
